<template>
	<view :style="skin" class="content searchUser">
		<StatusBarHeight bgColor="var(--subjectColor)" />
		<view class="searchInput">
			<text class="iconfont icon-a-mingchengReturn" @click="goBack"></text>
			<u--input :placeholder="$t('lease.pleEnter')" v-model="user" @change="getUserList" @confirm="getUserList" shape="circle" clearable
				color="#000" placeholderStyle="color: #000"></u--input>
		</view>

		<view class="userList">
			<view class="list" v-for="(item,index) in userList" :key="item.customerAccount" @click="changeUser(item)">
				<view class="userLeft">
					<u--image shape="circle" :src="item.avatar" width="75px" height="75px"></u--image>
				</view>
				<view class="userRight">
					<view class="userInfoLine">
						<text>{{$t('lease.name')}}:</text>
						<text>{{item.nickname}}</text>
					</view>
					<view class="userInfoLine">
						<text>ID:</text>
						<text>{{item.customerAccount}}</text>
					</view>
					<view class="userInfoLine">
						<text>{{$t('lease.phone')}}:</text>
						<text>{{item.phone}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		user
	} from '@/utils/sql/sqlUser.js'
	import {
		userMemList
	} from '@/api/user.js'
	import StatusBarHeight from '@/components/StatusBarHeight.vue'
	import {
		addUser,
		cratetable,
		getUserAll
	} from '@/utils/sql/sqlUser.js'
	import {
		filteredObject
	} from '@/utils/index.js'
	import {
		userbdatasuser
	} from '@/api/leaData.js'
	export default {
		data() {
			return {
				user: '',
				src: '',
				userList: [],
				database: uni.getStorageSync('database')
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin,
			})
		},
		onShow() {
			let isNoNetWork = false
			// 监听网络网络变化
			uni.getNetworkType({
				success: async res => {
					if (res.networkType == 'none') {
						isNoNetWork = true
					} else {
						isNoNetWork = false
					}
				},

			})

			// 监听网络变化
			uni.onNetworkStatusChange(async function(res) {
				if (!res.isConnected) {
					isNoNetWork = true
				} else {
					isNoNetWork = false
				}
			});

			console.log(isNoNetWork);
			if (isNoNetWork) {
				this.getUserList()
			} else {
				this.getNewWorkUserList()
			}


			// this.getUserList()

		},
		components: {
			StatusBarHeight
		},
		methods: {
			...mapMutations(['setSelectUser']),
			getNewWorkUserList() {
				userMemList().then(async res => {
					console.log(res);
					if (res.code == 0) {
						let uRes = await getUserAll();
						let uArr = uRes.data
						let serveArr = res.data
						uArr.map(obj => {


							serveArr.map(ele => {
								if (ele.customerAccount == obj.customerAccount) {
									return ele.rentNum = obj.rentNum, ele.overdueNum = obj.overdueNum, ele.lastTimeRent = obj.lastTimeRent 
								}
							})
						});

						let newArr = serveArr.map(obj => {
							return {
								...filteredObject(obj)
							}
						})


					
						newArr.map(ele =>{
							if(!ele.rentNum){
								return ele.rentNum = 0
							}
						})
						
						newArr.map(ele =>{
							if(!ele.overdueNum){
								return ele.overdueNum = 0
							}
						})
						newArr.map(ele =>{
							if(!ele.lastTimeRent){
								return ele.lastTimeRent = ''
							}
						})
							console.log(newArr);
						this.userList = newArr
						newArr.forEach(item => {
							addUser(item)
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
						})
					}

				})
			},
			async getUserList() {

				let sqltxt
				if (this.user == '') {
					sqltxt = `select * from ${user}`;
				} else {
					sqltxt =
						`select * from ${user} where nickname like '%${this.user}%' or customerAccount like '%${this.user}%' or phone like '%${this.user}%'`;
				}

				let res = await this.$sql.selectSQL(this.database, sqltxt);
				console.log(res.data);
				this.userList = res.data
			},

			goBack() {
				uni.navigateBack()
			},
			changeUser(item) {
				console.log(item);
				// uni.setStorageSync('selectUser', item)
				this.setSelectUser(item)
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.searchUser {
		.searchInput {
			width: 100%;
			height: 64px;
			display: flex;
			padding: 16px;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-evenly;
			background-color: var(--subjectColor);

			text {
				color: #fff;
				margin-right: 8px;
			}

			/deep/.u-input {
				background-color: #8BAEFF;
			}
		}

		.userList {
			width: 100%;
			height: calc(100% - 120px);
			overflow-y: auto;
			padding: 16px;
			box-sizing: border-box;

			.list {
				width: 100%;
				height: 93px;
				border: 1px solid #ccc;
				box-sizing: border-box;
				display: flex;
				margin-bottom: 16px;

				.userLeft {
					width: 90px;
					height: 76px;
					margin-top: 8px;
					border-right: 1px solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.userRight {
					padding: 16px 8px;
					box-sizing: border-box;
					font-size: 12px;

					.userInfoLine {
						margin-bottom: 4px;
					}
				}
			}
		}
	}
</style>